<template>
    <div>
        <div class="positionProductEcharts" :ref="id"  style="width: 100vw; height: 8rem" ></div>
    </div>

</template>

<script>
import * as echarts from 'echarts/core';
import { TreemapChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([TreemapChart, CanvasRenderer, UniversalTransition]);
    // import Vue from 'vue'
    // import  * as echarts5 from 'echarts/core';
    // Vue.prototype.$echarts5 = echarts5
// 问题：是接百分比来展示区块大小的，数值小的区块很小，会小到没有，加起来比例是100，只和数据有关百分百总共形式和属性没什么关系

    export default {
        data() {
            return {
                map: 'echartTreeMap'
            };
        },
        props: {
          id: {
            type: String,
          },
        },
        activated() {},
        methods: {
            test() {
                alert('test')
            },
            // add 字体自适应
            fontSize(res) {
                let docEl = document.documentElement,
                    clientWidth =
                    window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
                if (!clientWidth) return;
                let fontSize = 100 * (clientWidth / 750);
                return res * fontSize;
            },
            getOption: function() {
                let option = {
                    color: ['#FBFBFB'],//区块背景色
                    itemStyle: {
                        borderRadius: 8,
                        borderWidth: 1,
                        borderColor: '#000',
                        shadowBlur: 1,
                        shadowColor: '#DEDEDE',
                    },
                    emphasis: {
                        disabled: true,
                    },
                    series: [{
                        type: 'treemap',
                        left: '40',
                        top: '10',
                        // 值整理成这种形式
                        data:this.positionProductArr,
                        roam: false,
                        nodeClick: false,
                        colorAlpha: [0.2, 0.2],
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                        shadowBlur: 10,
                        breadcrumb: {
                            show: false, // 是否显示下面的面包屑导航
                        },
                        levels: [{
                            label: {
                                show: true,
                                position: 'insideBottomLeft',
                                color: '#333',
                            },
                            colorSaturation: [0.3, 0.5],
                            itemStyle: {
                                borderWidth: 0,
                                gapWidth: 5,//间隔
                                borderRadius: 1000,
                                borderColor: '#FFF',
                            },
                        }, ],
                        label: {
                            show: true,
                            position: 'bottom',
                            distance: -55,
                            overflow: 'truncate',
                            formatter: function(params) {
                                return (
                                    '{value|' + params.value + '%}' + '\n' + '{name|' + params
                                    .name + '} {label|name}'
                                );
                            },
                            rich: {
                                value: {
                                    color: '#333',
                                    fontSize: 26,
                                    fontWeight: 600,
                                    padding: [0, 0, 0, 10],
                                },
                                name: {
                                    color: '#333',
                                    fontSize: 14,
                                    padding: [0, 0, 0, 10],
                                    fontWeight: 600,
                                },
                            },
                        },
                    }, ],
                    tooltip: {
                        formatter: function(info) {
                            return '<div class="tooltip-title">' + info.name + '</div>' + info.value + '%';
                             // return '<div class="tooltip-title">' + info.name + '</div>' + info.value ;
                        },
                    },
                };
                return option;
            },
            drawPositionProductEcharts(arr) {
                let _this = this;
                _this.positionProductArr = arr;
                _this.positionProductEcharts = echarts.init(this.$refs.positionProductEcharts);
                _this.positionProductEcharts.setOption(this.getOption());

            },
        },
        mounted() {
            let _this = this;
            window.addEventListener('resize', function() {
                _this.positionProductEcharts.resize();
            });
        },
    };
</script>

<style lang="less" scope>
    .positionProductEcharts {
        width: 100%;
        height: 100%;
    }
</style>
